<script setup lang="ts">
import Header from './components/Header.vue';
import { onBeforeMount, ref } from 'vue';
import { useRoute } from 'vue-router';
import Tabs from './components/Tabs.vue';
import Edit from '@/components/icons/community/Edit.vue';
import Info from './components/Info.vue';
import { router } from '@/router';

const communityId = ref();

onBeforeMount(() => {
    const route = useRoute();
    const id = route.query.id;
    if (id != undefined && !Array.isArray(id)) {
        communityId.value = id;
    }
})

const toEdit = () => {
    router.push({
        name: 'CommunityArticleEdit',
        query: {
            "communityId": communityId.value
        }
    });
}

</script>

<template>
    <div class="container">
        <Header></Header>
        <Info v-model="communityId"></Info>
        <Tabs v-model="communityId"></Tabs>
        <Edit class="fixed" @click="toEdit"></Edit>
    </div>
</template>

<style lang="scss" scoped>
.fixed {
    position: fixed; /* 固定定位 */
    bottom: 20px; /* 距离底部的距离 */
    right: 20px; /* 距离右侧的距离 */
    width: 80px;
    height: 80px;
}
</style>